*,
*:before,
*:after {
    box-sizing: inherit;
}

// 这样的好处在于他不会覆盖其他组件的 box-sizing 值
html,
body {
    font-family: PingFang-SC-Medium, PingFangSC-Semibold, "微软雅黑";
    font-weight: 400;
    font-size: 16px;
    -webkit-font-smoothing: antialiased; // 是字体更清晰
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

#app {
    width: 100%;
    min-height: 100vh;
    background-color: #F1F5F8;
}

.page {
    padding-bottom: 60px;
}

.clear {
    zoom: 1;
}

/*其他浏览器*/

.clear:after {
    content: '';
    display: block;
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.box-shadow {
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1);
}

.bottom-shadow {
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.05)
}

// oveflow图片占位防止抖动
.img-ratio {
    width: 100%;
    overflow: hidden;
    padding-top: 75%;
}

.img-ratio>img {
    width: 100%;
    height: 100%;
}

// 组件内的样式
.bg-white {
    background-color: #fff;
}